<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>

	<style>
		* {
			padding: 0;
			margin: 0;
		}

		ul,
		li {
			list-style: none;
		}

		#header {
			width: 7.50rem;
			height: 1rem;
			background-color: #fe5700;
			overflow: hidden;
		}

		#banner {
			width: 7.5rem;
			height: 3rem;
			overflow: hidden;
			position: relative;
		}

		#banner ul {
			width: 999rem;
			height: 3rem;
			overflow: hidden;
			transform: translateX(0);
		}

		#banner li {
			width: 7.5rem;
			height: 3rem;
			float: left;
		}

		#banner img {
			width: 100%;
			height: 100%;
			display: block;
		}

		#page_content {
			background-color: white;
			position: relative;
			top: -2rem;
		}

		#load {
			height: 2rem;
			line-height: 2rem;
			text-align: center;
		}
	</style>
	<script>
		let oHtml = document.querySelector('html');
		window.onresize = function () {
			oHtml.style.fontSize = (document.documentElement.clientWidth / 750) * 100 + 'px';
		}

		window.onresize();

		// touch事件
		// DOM3事件最好都绑定

		window.onload = function () {
			let oBanner = document.querySelector('#banner');
			let oUl = oBanner.querySelector('ul');
			let oPage = document.querySelector('#page_content');
			let oLoad = document.querySelector('#load');
			let oLi = oUl.children;
			let x = -oLi[0].offsetWidth,
				y = 0,
				n = 1;
			let disX, disY;
			let startX, startY;
			let dir = '';
			let moveX = 0;
			let stampStart, stampEnd;

			
			oUl.appendChild(oLi[0].cloneNode(true));
			oUl.insertBefore(oLi[oLi.length - 2].cloneNode(true), oLi[0]);
			oUl.style.transform = `translateX(-7.5rem)`;

			oBanner.addEventListener('touchstart', function (ev) {
				
				oPage.style.transition = `none`;
				oUl.style.transition = `none`;
				// 无缝轮播
				if (n == oLi.length - 1 || n == 0) {
					x = n == 0 ? -oLi[0].offsetWidth * (oLi.length - 2) : -oLi[0].offsetWidth
					oUl.style.transform = `translateX(${x}px)`;
				}
				stampStart = ev.timeStamp;
				dir = '';
				startX = ev.targetTouches[0].clientX;
				startY = ev.targetTouches[0].clientY;
				disX = startX - x;
				disY = startY - y;


				oBanner.addEventListener('touchmove', fnMove, false);

				oBanner.addEventListener('touchend', fnEnd, false);

			})


			function fnMove(ev) {

				if (dir === '') {
					if (Math.abs(ev.targetTouches[0].clientX - startX) >= 5) {
						dir = 'x';
					} else if (Math.abs(ev.targetTouches[0].clientY - startY) >= 5) {
						dir = 'y';
					}
				} else {
					// x是移动banner的，y是移动整个页面的
					if (dir === 'x') {
						x = ev.targetTouches[0].clientX - disX;
					} else if (dir === 'y') {
						y = ev.targetTouches[0].clientY - disY;
					}

					oUl.style.transform = `translateX(${x}px)`;

					if (y > 0) {
						oPage.style.transform = `translateY(${y / 3}px)`;
						if (y > 200) {
							oLoad.innerHTML = '松手';
							oPage.style.transform = `translateY(${200 / 3}px)`;
						} else {
							oLoad.innerHTML = '下拉刷新';
						}
					} else {
						oPage.style.transform = `translateY(${y}px)`;
					}
				}
			}

			function fnEnd(ev) {

				oBanner.removeEventListener('touchstart', fnMove, false);
				oBanner.removeEventListener('touchend', fnEnd, false);

				if (y > 0) {
					y = 0;
					oPage.style.transition = `0.3s all ease`;
					oPage.style.transform = `translateY(0px)`;
				}

					// x为负数是网左滑动，为了获取的宽度是正数所以x取负值
					// x / 一张轮播图的大小，四舍五入后就是应该显示轮播图的索引
					n = Math.round(-x / oLi[0].offsetWidth);

				// 用一个图片的宽度*图片索引得出应该显示的图片的x值
				x = -n * oLi[0].offsetWidth;
				oUl.style.transition = `0.3s all ease`;
				oUl.style.transform = `translateX(${x}px)`;
			}
		}
	</script>

</head>

<body>

	<div id="header"></div>
	<div id="load">
		下拉刷新
	</div>
	<div id="page_content">

	
	<section id="banner">
		<ul>
			<li>
				<img src="https://aecpm.alicdn.com/simba/img/TB1CWf9KpXXXXbuXpXXSutbFXXX.jpg_q50.jpg" alt="">
			</li>
			<li>
				<img src="http://gw.alicdn.com/imgextra/i1/18/TB259_4asj_B1NjSZFHXXaDWpXa_!!18-0-lubanu.jpg_q50.jpg" alt="">
			</li>
			<li>
				<img src="http://aecpm.alicdn.com/simba/img/TB14ab1KpXXXXclXFXXSutbFXXX.jpg_q50.jpg" alt="">
			</li>
			<li>
				<img src="//img.alicdn.com/imgextra/i3/101/TB2aHgBcuSSBuNjy0FlXXbBpVXa_!!101-0-luban.jpg_q50.jpg" alt="">
			</li>
		</ul>
	</section>
</div>
	<section style="width:2000px;">

	</section>
</body>

</html>